<template>
    <el-row :gutter="24">
        <el-col :span="1">
            <div class="grid-content ep-bg-purple">
                <el-icon size="22px" @click="changeCollapse">
                    <Expand v-if="store.state.isCollapse"></Expand>
                    <Fold v-else></Fold>
                </el-icon>
            </div>
        </el-col>
        <el-col :span="19">
            <div class="grid-content ep-bg-purple">
                <MyBreadcrumb></MyBreadcrumb>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="grid-content ep-bg-purple">
                <MySet></MySet>
            </div>
        </el-col>
    </el-row>
    <MyTag></MyTag>
</template>

<script setup lang="ts">
import MyBreadcrumb from "./MyBreadcrumb.vue";
import MySet from "./MySet.vue";
import MyTag from "./MyTag.vue";
import {
    Expand,
    Fold
} from '@element-plus/icons-vue'
import { useStore } from 'vuex';

const store = useStore()
const changeCollapse = () => {
    store.commit("CHANGECOLLAPSE")
}
// const tagsView = computed(() => {
//     return store.state.tags
// })
</script>

<style scoped></style>